Vue.createApp({
    data() {
        return {
            message: "hello",
            user: {
                username: undefined,
                password: undefined,
                num: undefined,
                info: undefined
            }
        }
    },
    watch: {
        // 监听的 model 数据中的username值，发生改变就会触发该函数 深度监听 deep:true
        user:{
            handler(newVal, oldVal) {
                console.log("user值发生改变了")
                console.log(newVal)
                axios.get("/verifyName?username=" + newVal).then(res => {
                    console.log(res)
                }).catch()
            },
            deep: true
        }
        // password(newVal, oldVal) {
        //     console.log("password发生变化")
        // }
    },
    methods: {
        changeMessage() {
            this.message = "hello world"
        },
        test() {
            console.log("我是第二个事件")
        },
        send() {
            console.log("send")
            // TODO 发送请求
        },
        click(msg) {
            console.log("点击了" + msg)
        },
        sendName() {
            console.log(this.username)
        },
        verifyUsername() {
            // alert(this.username)
        }
    }
}).mount("#app")

// 阻止表单默认提交事件
// 1. form onsubmit="return false"
// 2. form @submit.prevent="函数名"
// 3. form @submit.prevent button @click="函数名"